
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number Arrangement from 1 to 100 with JavaScript</title>
<style>
    .number {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 50%;
        font-size: 14px;
    }
    .black, .red {
        background-color: inherit;
        color: white;
    }
    .black {
        background-color: rgb(162, 222, 9);
    }
    .red {
        background-color: rgb(18, 242, 51);
    }
</style>
</head>
<body>
    <div id="numberContainer"></div>

    <script>
        var container = document.getElementById('numberContainer');
        var colors = ['black', 'red']; // Array of colors to alternate

        for (var i = 1; i <= 100; i++) {
            var numberSpan = document.createElement('span');
            numberSpan.classList.add('number');
            numberSpan.classList.add(colors[i % 2]); // Add alternating class
            numberSpan.textContent = i;

            container.appendChild(numberSpan);
        }
    </script>
</body>
</html>